// 引入threejs
import * as THREE from 'three';
// 引入相机控件OrbitControls
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

import groupModel from './groupModel.js';

// ===============场景===============
// 创建一个场景
const scene = new THREE.Scene();

// ===============物体===============
scene.add(groupModel);

// 创建一个三维坐标轴
const axes = new THREE.AxesHelper(100);
scene.add(axes);

// ===============光源===============
// 添加一个环境光
const ambient = new THREE.AmbientLight(0xffffff,0.2);
scene.add(ambient);

// 添加一个平行光
const directionalLight = new THREE.DirectionalLight(0xffffff,0.8);
directionalLight.position.set(150,300,150);
scene.add(directionalLight);

// ===============相机===============
const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 2000)
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);

// ===============渲染===============
// 创建一个webgl渲染器
const renderer = new THREE.WebGLRenderer();
// 设置canvas画布宽高
renderer.setSize(width, height);
// 执行渲染操作
renderer.render(scene, camera);
// 将渲染结果canvas画布，添加到网页页面上
document.body.appendChild(renderer.domElement);
// 告诉threejs你的屏幕的设备像素比
renderer.setPixelRatio(window.devicePixelRatio);

// 周期性执行，默认理想状态下每秒执行60次
const clock = new THREE.Clock(); // 创建一个时钟对象
function render() {

    const spt = clock.getDelta()*1000; // 获取时间间隔单位：毫秒
    renderer.render(scene, camera); // 周期性执行相机的渲染功能，更新canvas画布
    requestAnimationFrame(render);
}
render();

// ===============相机控件===============
// 创建一个相机控件
const controls = new OrbitControls(camera, renderer.domElement);
// 上面有循环渲染函数，可不执行下面的重复渲染

window.onresize = function(){
    // 重置画布尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 重置相机投影的相关参数
    camera.aspect = window.innerWidth / window.innerHeight;
    // 渲染器重新渲染
    camera.updateProjectionMatrix();
}


